<template>
	<div class="w-full py-[30px]">
		<n-tabs
			v-model:value="tab"
			size="large"
			justify-content="center"
			:bar-width="40"
			animated
			tab-class="h-12">
			<n-tab-pane :name="AccountShowType.register" :tab="$t('account.register')">
				<register-vue @success="onClose"></register-vue>
			</n-tab-pane>
			<n-tab-pane :name="AccountShowType.login" :tab="$t('account.login')">
				<login-vue @success="onClose" @reset="onReset"></login-vue>
			</n-tab-pane>
		</n-tabs>
		<third-login />
		<base-icon
			name="close"
			class="text-[20px] absolute right-3 top-3 cursor-pointer"
			@click="onClose" />
	</div>
</template>
<script lang="ts" setup>
import { NTabs, NTabPane } from 'naive-ui'
import { BaseIcon } from '@/components/base'
import LoginVue from './login.vue'
import RegisterVue from './register.vue'
import ThirdLogin from './third-login.vue'
import { useAccountStore } from '@/store'
import { AccountShowType } from '@/types'
import { computed } from 'vue'

const accountStore = useAccountStore()

const tab = computed({
	get() {
		return accountStore.accountShow
	},
	set(newValue: any) {
		accountStore.showAccount(newValue)
	}
})

const onReset = () => accountStore.showAccount(AccountShowType.forgotPassword)

const onClose = () => accountStore.showAccount(AccountShowType.none)
</script>
